调试 JavaScript 入门

本文介绍使用 DevTools 调试任何 JavaScript 问题的基本工作流。

调试的第一步是查找一系列可持续重现 bug 的操作。

在新窗口或选项卡中打开演示网页 “开始调试 JavaScript ”。若要打开网页，请右键单击该链接，然后在弹出窗口中选择“在新选项卡中打开链接”或“在新窗口中打开链接”。 或者，可以长按 Ctrl windows、Linux) 或 Command macOS) ( (，然后单击链接。

提示

在 InPrivate 模式中打开 Microsoft Edge。 InPrivate 模式可确保 Microsoft Edge 以干净的状态运行。 有关详细信息，请参阅 在 Microsoft Edge 中浏览 InPrivate

在“数字 1 ”文本框中输入 5。

在“数字 2 ”文本框中输入 1。

单击 “添加数字 1”和“数字 2”。 按钮下方的标签显示 5 + 1 = 51。 结果应为 6。 接下来，转到 步骤 2：熟悉源工具 UI ，开始修复 Bug 添加错误。

DevTools 为不同的任务提供了多种工具。 这些任务包括更改 CSS、分析页面加载性能以及监视网络请求。 源工具是调试 JavaScript 的地方。

要打开 DevTools，请右击网页，然后选择“检查”。 或者，按“Ctrl+Shift+I”(Windows、Linux)或“Command+Option+I”(macOS)。 DevTools 随即打开。

选择 “源” 工具。 选择“ 页面 ”选项卡，然后选择 JavaScript 文件 get-started.js。

源工具 UI 有三个部分。

) 左上角的“ 导航器 ”窗格 (。 此处列出了网页请求的所有文件。

) 右上角的 “编辑器 ”窗格 (。 在 “导航器 ”窗格中选择文件后，此窗格将显示该文件的内容。

调试 器 窗格 (底部) 。 此窗格提供用于检查网页的 JavaScript 的工具。 如果 DevTools 窗口较宽，则此窗格将显示在 “编辑器 ”窗格的右侧。

调试此类问题的常见方法是在代码中插入多个 console.log() 语句，然后在脚本运行时检查值。 例如：

方法 console.log() 可能会完成作业，但 断点 可以更快地完成它。 断点允许在运行时中间暂停代码，并检查此时的所有值。 与console.log()方法相比，断点具有以下优点。

使用 console.log()，需要手动打开源代码，找到相关代码，插入 console.log() 语句，然后刷新网页以在控制台中显示消息。 使用断点，可以在相关代码上暂停，而无需知道代码是如何构造的。

在 console.log() 语句中，需要显式指定要检查的每个值。 通过断点，开发工具会及时显示所有变量的值。 有时，影响代码的变量被隐藏和混淆。

简言之，断点可以帮助你比 console.log() 方法更快地查找和修复 bug。

如果你退后一步思考应用的工作原理，你可能会有据可知地猜测，错误的总和 (5 + 1 = 51) 是在与“添加数字 1 和数字 2”按钮关联的事件侦听器中click计算的。 因此，可能想在 click 侦听器运行期间暂停代码。 事件侦听器断点 允许执行此操作：

在 “导航器”窗格中， (index) 默认选择 。 单击 。get-started.js

在 “调试器 ”窗格中，单击“ 事件侦听器断点 ”以展开部分。 DevTools 显示事件类别的列表，例如 动画 和 剪贴板。

单击“ 展开 () 鼠标 事件打开该类别。 开发工具显示鼠标事件的列表，如单击和鼠标按下。 每个事件旁边都有一个复选框。

选中 单击旁边的复选框。 现在开发工具设置为在运行任何 click 事件侦听器时自动暂停。

返回到演示，再次单击“ 添加数字 1 和数字 2 ”。 开发工具暂停演示并在“源”具中突出显示一行代码。 DevTools 应在 中的 get-started.js第 16 行暂停，如下一个代码片段所示。

如果在其他代码行上暂停，请单击“ 恢复脚本执行 ” () ，直到在正确的行上暂停。

注意

如果在另一行暂停，则将拥有一个浏览器扩展，此扩展会在你访问的每个网页上注册一个 click 事件侦听器。 你已在扩展的 click 侦听器中暂停。 如果使用 InPrivate 模式 在专用模式下进行浏览，这会禁用所有扩展，则可能会看到每次都暂停在所需的代码行上。

事件侦听器断点只是开发工具中提供的许多类型的断点之一。 记住所有不同的类型，以帮助你尽快调试不同的方案。 若要了解何时以及如何使用每种类型，请参阅 使用断点暂停代码。

Bug 的一个常见原因是脚本以错误的顺序运行。 单步执行代码允许你演练代码的运行时。 一次浏览一行，以准确确定代码的位置以与不同的顺序运行。 立即尝试：

单击“ 单步执行下一个函数调用 (下 ) 。 DevTools 无需步入即可运行以下代码。

注意

开发工具跳过几行代码。 这是因为 inputsAreEmpty() 计算结果为 false，因此语句的代码 if 块不会运行。

在 DevTools 的 “源 ”工具上，单击“ 单步执行下一个函数调用 () 以逐行执行函数的 updateLabel() 运行时。

这是单步执行代码的基本概念。 如果查看 中的 get-started.js代码，可以看到 bug 可能位于 函数中的 updateLabel() 某个位置。 可以使用另一种类型的断点 (代码行断点) 来暂停代码，使其更接近 bug 的可能位置，而不是单步执行每行代码。

代码行断点是最常见的断点类型。 到达要暂停的特定代码行时，使用代码行断点。

查看 updateLabel() 中的最后一行代码：

的 label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum; 行号为 34。 单击第 34 行。 DevTools 在 34 的左侧显示一个红色圆圈。 红色圆圈表示代码行断点位于此行上。 开发工具始终在运行此代码行之前暂停。

单击“ 恢复脚本执行 ” () 。 脚本将继续运行，直到达到第 34 行。 在行 31、32 和 33 上，DevTools 将每个变量的值打印到每行的分号右侧。 这些值为：

addend1、addend2 和 sum 的值看起来可疑。 这些值用引号括起来，这意味着每个值都是一个字符串。 这是 Bug 原因的一个很好的线索。 下一步是收集有关这些变量值的详细信息。 开发工具提供了许多用于检查变量值的工具。

如果在代码行上暂停，“ 范围 ”窗格将显示当前定义的局部变量和全局变量以及每个变量的值。 如果适用，它还会显示关闭变量。 双击变量值进行编辑。 如果不在代码行上暂停，“ 作用域 ”窗格为空。

“ 监视 ”窗格允许监视变量 (的值，例如 sum) 或表达式 (（如 typeof sum) ）。 可以将任何有效的 JavaScript 表达式存储在监视表达式中。

选择“ 监视 ”选项卡。

单击 “添加监视表达式 () 。

键入 typeof sum。

按 Enter。 DevTools 显示 typeof sum: "string"。 冒号右侧的值是监视表达式的结果。

注意

在以下屏幕截图中，监视表达式 typeof sum 显示在“ 监视 ”窗格中。 如果 DevTools 窗口较宽，“ 监视 ”窗格将显示在 “调试器 ”窗格中，然后显示在右侧。

正如猜想的那样，如果应为数字， sum 被评估为字符串。 现在确认值类型是 Bug 的原因。

控制台允许你查看console.log()输出。 还可以使用 控制台 在代码语句处暂停调试程序时评估任意 JavaScript 语句。 对于调试，可以使用 控制台 来测试 bug 的潜在修复。

如果 控制台 工具已关闭，请按 Esc 将其打开。 控制台工具将在 DevTools 窗口的下窗格中打开。

在控制台中，键入 parseInt(addend1) + parseInt(addend2)。 工具的语句暂停在作用域为 addend1 和 addend2 的代码行上。

按 Enter。 开发工具将评估该语句并打印 6，这是预期演示生成的结果。

我们已确定针对 bug 的可能修复方法。 接下来，直接在 DevTools UI 中编辑 JavaScript 代码，然后重新运行演示以测试修补程序，如下所示。

单击“ 恢复脚本执行 ” () 。

在 “编辑器 ”窗格中，将 行 var sum = addend1 + addend2 替换为 var sum = parseInt(addend1) + parseInt(addend2)。

按 Ctrl+S (Windows、Linux) 或 Command+S (macOS) 保存更改。

单击“ 停用断点” () 。 断点图标将变为灰色，以指示断点处于非活动状态。 设置“停用断点”时，开发工具会忽略你设置的任何断点。 下一个屏幕截图显示了演示的结果，其中更新和停用断点后 var sum 修复了 bug。

尝试使用具有不同值的演示。 演示现在计算正确。

注意

此工作流仅将修补程序应用于从服务器发送的代码的本地副本。 调试项目时，在确定修补程序后，仍需要将此修复应用到服务器上的代码，例如编辑本地源代码，然后将固定代码重新部署到服务器。

祝贺你！ 现在，你已了解如何在调试 JavaScript 时充分利用 Microsoft Edge 开发工具。 本文中学习的工具和方法可以为你节省很多时间。

本文介绍了设置断点的两种方法。 DevTools 还提供了设置断点以在满足特定条件时暂停代码的方法，例如：

有关何时以及如何使用每种类型的详细信息，请参阅 使用断点暂停代码。

本文不介绍几个代码单步执行控件。 有关详细信息，请参阅“JavaScript 调试功能”中的 单步执行代码行 。

注意

此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面 在此处 找到，由 凯斯·巴斯克 (技术作家、Chrome DevTools & Lighthouse) 创作。

此作品在 Creative Commons 署名 4.0 国际许可下获得许可。